<template>
    <div class="todayData">
        <el-card class="box-card">
            <div class="title">
                <div class="titleInfo">
                    订单管理
                </div>
                <el-button type="text" class="button" @click="button()">
                        订单明细 >
                </el-button>
            </div>
            <div class="info">
                <div class="label">
                    <div class="infoTop">
                        <svg t="1715963108787" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1477" width="32" height="32"><path d="M708.266667 904.533333a170.666667 170.666667 0 1 1 170.666666-170.666666 170.666667 170.666667 0 0 1-170.666666 170.666666z m0-307.2a136.533333 136.533333 0 1 0 136.533333 136.533334 136.533333 136.533333 0 0 0-136.533333-136.533334z m68.266666 153.6h-68.266666a17.066667 17.066667 0 0 1-17.066667-17.066666v-68.266667a17.066667 17.066667 0 0 1 34.133333 0v51.2h51.2a17.066667 17.066667 0 0 1 0 34.133333z m34.133334-204.8c-13.482667 0-17.066667-20.6336-17.066667-34.133333V170.666667a14.2336 14.2336 0 0 0-17.066667-17.066667h-580.266666a22.186667 22.186667 0 0 0-17.066667 17.066667l-2.389333 689.6128a12.3904 12.3904 0 0 0 12.288 12.288L503.466667 870.4c17.237333 0 34.133333 3.652267 34.133333 17.066667s-16.384 16.964267-33.109333 16.964266h-310.613334a48.896 48.896 0 0 1-48.810666-49.032533V168.4992A48.896 48.896 0 0 1 193.877333 119.466667h587.264c26.965333 0 46.592 17.698133 46.592 51.2v341.333333c0 17.8688-3.584 34.133333-17.066666 34.133333z" fill="#666666" p-id="1478"></path><path d="M673.962667 324.471467a17.7152 17.7152 0 0 0-18.261334-17.066667H317.098667a17.066667 17.066667 0 1 0 0 34.133333h338.602666a17.7152 17.7152 0 0 0 18.261334-17.066666z m-356.522667 102.4a16.913067 16.913067 0 1 0 0 33.6896h320.853333a16.930133 16.930133 0 1 0 0-33.6896H317.44z m201.557333 119.022933H317.781333a17.152 17.152 0 1 0 0 34.133333h201.216a17.152 17.152 0 1 0 0-34.116266z m-201.386666 153.6h149.845333a16.913067 16.913067 0 1 0 0-33.672533h-149.845333a16.913067 16.913067 0 1 0 0 33.6896z" fill="#999999" p-id="1479"></path></svg>
                        待接单
                    </div>
                    <div class="infoMid" style="color: #FC483B;">
                        {{res.waitingOrders}}
                    </div>
                </div>
                <div class="label">
                    <div class="infoTop">
                        <svg t="1715963254104" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5151" width="32" height="32"><path d="M997.66532 684.403648c-22.180375-86.698534-86.761752-115.39033-121.450196-130.788352l-5.84312-2.582893c-1.72494-22.577743-4.452331-45.155487-8.127988-67.489391h57.654525a24.600709 24.600709 0 0 0 19.33558-9.292999 23.480853 23.480853 0 0 0 4.316864-20.672182l-30.588326-113.538955a24.383963 24.383963 0 0 0-23.661475-17.845448h-71.724975a508.766867 508.766867 0 0 0-29.432346-60.390948L751.188612 139.982008a24.383963 24.383963 0 0 0-23.480853-17.159085H493.423033c-13.492459 0-24.474274 10.70185-24.474274 23.905315S479.921542 170.687739 493.423033 170.687739h122.750675l22.758365 103.487344 3.486003 82.977722a182.762316 182.762316 0 0 1-53.039634 136.884342 191.10705 191.10705 0 0 1-131.384404 57.284251V437.231545C457.876634 381.283897 411.520011 335.95682 354.289948 335.893602H189.770448c-45.959254 0-88.14351 26.659799-107.470058 67.959008C21.674634 533.295327 10.692819 625.620235 44.487185 722.487785a24.383963 24.383963 0 0 0 23.164765 16.183726h298.026211v1.363696c0 62.431976-50.989575 113.24996-113.629266 113.24996a113.313178 113.313178 0 0 1-108.102235-78.209302 24.221403 24.221403 0 0 0-18.062195-16.617219 24.781331 24.781331 0 0 0-23.62535 7.378406 23.480853 23.480853 0 0 0-4.885824 23.769848c21.72882 66.676591 83.871801 111.497927 154.675604 111.497928 89.62461 0 162.559752-72.248779 162.559752-161.051559v-1.363695h230.816785a139.521422 139.521422 0 0 0-1.80622 22.14425c0 77.351348 63.497645 140.271003 141.598575 140.271004s141.652761-62.919655 141.652761-140.271004S863.372903 620.535728 785.253911 620.535728A141.905632 141.905632 0 0 0 662.53033 690.878944H85.614803c-17.583546-61.050218-13.998201-122.326213 12.562256-198.042932h152.155927c13.546646 0 24.474274-10.70185 24.474274-23.905315s-10.954721-23.905315-24.474274-23.905315h-133.208685q4.569735-10.44898 9.636181-21.268234c11.198561-24.212372 35.772176-39.845201 62.982873-40.070979h164.519499c30.245145 0 54.737481 23.977563 54.764574 53.527314v7.811899H375.693648c-13.492459 0-24.474274 10.710881-24.474273 23.905315s10.981814 23.905315 24.474273 23.905315h33.324749V575.280899a23.715662 23.715662 0 0 0 7.152629 16.906214 24.85358 24.85358 0 0 0 17.321645 7.035225h18.062195c65.92701 0 127.392659-25.630254 173.053886-72.09525s69.29561-107.533276 66.604343-171.925l-2.519676-60.264512h62.170074c39.203993 72.384245 65.692202 172.972607 71.490166 272.423051a23.878221 23.878221 0 0 0 11.297903 18.820806c6.222426 3.838216 13.66405 7.134567 22.252624 10.972784 32.83707 14.558129 77.784841 34.516854 94.2395 98.84536 3.278288 12.815127 16.554001 20.599933 29.649093 17.402924a23.86919 23.86919 0 0 0 17.872541-28.998853zM785.253911 668.301201c51.161166 0 92.731307 41.488861 92.731308 92.50553S836.369922 853.30323 785.253911 853.30323s-92.704214-41.488861-92.704214-92.469406S734.146932 668.301201 785.253911 668.301201z m85.235497-298.297144l17.709982 65.737357h-35.22128c-5.093539-22.577743-11.10825-44.586527-17.94479-65.737357zM683.02189 247.126947L666.196956 170.687739h43.277018l23.182827 76.421146z" fill="#373838" p-id="5152"></path></svg>
                        待派送
                    </div>
                    <div class="infoMid" style="color: #FC483B;">
                         {{ res.deliveredOrders }}
                    </div>
                </div>
                <div class="label">
                    <div class="infoTop">
                        <svg t="1715963285055" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6175" width="32" height="32"><path d="M590.75 897.11h-358.9a64.25 64.25 0 0 1-64.17-64.17V214.65a64.25 64.25 0 0 1 64.17-64.17H745a64.25 64.25 0 0 1 64.18 64.17v272.18a14.18 14.18 0 0 1-28.35 0V214.65A35.86 35.86 0 0 0 745 178.83H231.85A35.87 35.87 0 0 0 196 214.65v618.29a35.87 35.87 0 0 0 35.83 35.82h358.9a14.18 14.18 0 0 1 0 28.35z" p-id="6176"></path><path d="M263.17 277.96m14 0l313.04 0q14 0 14 14l0 2q0 14-14 14l-313.04 0q-14 0-14-14l0-2q0-14 14-14Z" p-id="6177"></path><path d="M263.17 427.59m14 0l313.04 0q14 0 14 14l0 2q0 14-14 14l-313.04 0q-14 0-14-14l0-2q0-14 14-14Z" p-id="6178"></path><path d="M263.17 577.22m14 0l198.87 0q14 0 14 14l0 2q0 14-14 14l-198.87 0q-14 0-14-14l0-2q0-14 14-14Z" p-id="6179"></path><path d="M684.723814 745.840297m9.899495-9.899495l73.213836-73.213836q9.899495-9.899495 19.79899 0l1.414213 1.414213q9.899495 9.899495 0 19.79899l-73.213836 73.213836q-9.899495 9.899495-19.79899 0l-1.414213-1.414214q-9.899495-9.899495 0-19.798989Z" p-id="6180"></path><path d="M701.991912 770.337317m-9.899494-9.899495l-49.638896-49.638896q-9.899495-9.899495 0-19.79899l0 0q9.899495-9.899495 19.798989 0l49.638896 49.638896q9.899495 9.899495 0 19.79899l0 0q-9.899495 9.899495-19.798989 0Z" p-id="6181"></path><path d="M715.75 868.85c-86.72 0-157.27-70.55-157.27-157.27S629 554.31 715.75 554.31 873 624.86 873 711.58s-70.53 157.27-157.25 157.27z m0-286.19a128.92 128.92 0 1 0 128.92 128.92 129.06 129.06 0 0 0-128.92-128.92z" p-id="6182"></path></svg>
                        已完成
                    </div>
                    <div class="infoMid">
                         {{ res.completedOrders }}
                    </div>
                </div>
                <div class="label">
                    <div class="infoTop">
                        <svg t="1715963411438" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9720" width="32" height="32"><path d="M866.331875 692.7284375c-11.2546875-11.2546875-29.469375-11.2546875-40.72312499 0l-81.44906251 81.448125-81.448125-81.448125c-11.2546875-11.2546875-29.4684375-11.2546875-40.723125 0-11.255625 11.255625-11.255625 29.469375-0.0009375 40.723125l81.448125 81.448125-81.4471875 81.4471875c-11.255625 11.2565625-11.255625 29.4703125-0.0009375 40.723125 11.255625 11.255625 29.469375 11.255625 40.7240625 0l81.44718751-81.4471875 81.44718749 81.4471875c11.255625 11.255625 29.4703125 11.255625 40.725 0 11.2546875-11.25375001 11.2546875-29.4675-0.0009375-40.723125l-81.4471875-81.4471875 81.448125-81.448125c11.2565625-11.25375001 11.2565625-29.4675 0.0009375-40.723125z" fill="#8a8a8a" p-id="9721"></path><path d="M780.23374999 88.0878125c-0.294375 0-0.59624999 0.0009375-0.89062499 0.00375H244.6578125c-0.2990625-0.001875-0.5934375-0.00374999-0.89156251-0.00375-60.0815625 0-109.284375 48.609375-109.88718749 108.819375l-0.0009375 629.405625 0.0009375 0.253125c0.6028125 60.21374999 49.8028125 108.82125001 109.89 108.82125 0.294375 0 0.5915625-0.0009375 0.886875-0.00375h234.613125v-50.625H244.548125l-0.22875 0.0009375a52.565625 52.565625 0 0 1-0.54375 0.0028125c-32.3671875 0-58.8834375-26.15625001-59.2725-58.5796875V197.290625c0.3890625-32.4253125 26.8996875-58.5778125 59.2696875-58.5778125 0.1809375 0 0.3646875 0.0009375 0.545625 0.0028125l535.134375 0.0009375 0.2296875-0.0009375c0.1828125-0.001875 0.3628125-0.0028125 0.545625-0.0028125 32.3671875 0 58.8815625 26.1534375 59.2696875 58.5778125v398.20312501h50.625V197.159375l-0.0009375-0.25312501c-0.601875-60.2128125-49.7990625-108.8184375-109.88812501-108.81843749z" fill="#8a8a8a" p-id="9722"></path><path d="M318.524375 339.3265625h364.1896875c13.8440625 0 25.10625001-11.2621875 25.10625-25.10625 0-13.843125-11.263125-25.1053125-25.10625-25.1053125H318.524375c-13.8440625 0-25.1053125 11.2621875-25.1053125 25.1053125 0 13.8440625 11.26125001 25.10625001 25.1053125 25.10625zM318.524375 502.7h364.1896875c13.8440625 0 25.10625001-11.2621875 25.10625-25.10625001 0-13.843125-11.263125-25.1053125-25.10625-25.10531249H318.524375c-13.8440625 0-25.1053125 11.2621875-25.1053125 25.10531249 0 13.8440625 11.26125001 25.10625001 25.1053125 25.10625001zM510.2 634.58374999H318.524375c-13.8440625 0-25.1053125 11.2621875-25.1053125 25.10531251s11.2621875 25.1053125 25.1053125 25.1053125H510.2c13.8440625 0 25.1053125-11.2621875 25.1053125-25.1053125s-11.26125001-25.1053125-25.1053125-25.10531251z" fill="#8a8a8a" p-id="9723"></path></svg>
                        <span>已取消</span>
                        
                    </div>
                    <div class="infoMid">
                        {{ res.cancelledOrders }}
                    </div>
                </div>
                <div class="label">
                    <div class="infoTop">
                        <svg t="1715963355419" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8335" width="32" height="32"><path d="M298.666667 341.333333h384v42.666667H298.666667v-42.666667z m0 128h298.666666v42.666667H298.666667v-42.666667z m0 128h298.666666v42.666667H298.666667v-42.666667z m0-469.376C298.666667 104.405333 317.824 85.333333 341.12 85.333333h341.76C706.304 85.333333 725.333333 104.490667 725.333333 127.957333v42.752A42.645333 42.645333 0 0 1 682.88 213.333333H341.12C317.696 213.333333 298.666667 194.176 298.666667 170.709333V127.957333zM170.666667 938.666667h682.666666c23.68 0 42.666667-19.157333 42.666667-42.773334V170.773333C896 147.093333 876.842667 128 853.205333 128h-63.296v42.666667h63.296c0.128 0.106667 0.170667 725.333333 0.128 725.333333H170.666667V170.773333C170.752 170.709333 236.16 170.666667 236.16 170.666667V128H170.752A42.752 42.752 0 0 0 128 170.773333v725.12A42.666667 42.666667 0 0 0 170.666667 938.666667z m170.666666-768h341.333334V128H341.333333v42.666667z" fill="#3D3D3D" p-id="8336"></path></svg>
                        全部订单
                    </div>
                    <div class="infoMid">
                        {{ res.allOrders }}
                    </div>
                </div>
            </div>
        </el-card>
    </div>

</template>

<script>
import {overviewOrders} from '@/api/workspace'
export default {
    data(){
        return{
            res:{
                waitingOrders: 0,
                deliveredOrders: 0,
                completedOrders: 0,
                cancelledOrders: 0,
                allOrders: 0
            }
        }
    },
    created(){
        overviewOrders().then(res=>{
            this.res = res.data
        }).catch(err=>{
            console.log(err)
        })
    },
    methods:{
        button(){
            this.$router.push('/home/orders')
            this.$store.state.menu_active = 3
        }
    }
}
</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    /* width: 480px; */
    width: 100%;
    height: 180px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    /* justify-content: space-around; */
}

.todayData{
    width: 100%;
    height: 180px;
    margin-top: 5px;
}

.label{
    width: 18%;
    height: 80%;
    border-radius: 5px;
    background: rgb(236,245,255);
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color:#fdb80a4f; */
}

.box-card:hover{
    /* margin-top: -5px; */
    transform: scale(1.005);
    box-shadow: 0 0 10px 2px #d5d4d4;/*盒子阴影*/
    transition: all 0.5s;/*持续时间*/

}

.title{
    height: 30px;
    display: flex;
    justify-content: space-between;
}

.info{
    width: 100%;
    height: 85%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top: -8px;
}

.titleInfo{
    font-weight: bold;
}

.button{
    align-self: end;
    color: #9e9e9e;
    font-weight: 500;
}

::v-deep .box-card .el-card__body{
    height: 100%;
}

.infoTop{
    font-size: 14px;
    /* height: 50%; */
    align-items: center;
    line-height: 40px;
    text-align: left;
    margin-left: 15px;
}

.infoMid{
    font-weight: bold;
    font-size: 26px;
    /* height: 80%; */
    text-align: left;
    margin-right: 20px;
}

</style>